<template>
    <div class="sea-page">
        <article class="box">
            <blockquote>
                <p>文章在当前项目中的展示效果</p>
            </blockquote>
            <header>
                <h4>少年闰土</h4>
            </header>
            <main>
                《故乡》是鲁迅于1921年1月创作的短篇小说，首次发表于《新青年》第9卷第1号。
            </main>
            <section class="clearfix2">
                <img class="pull-right" src='/img/runtu.png' alt="闰土" width="268" height="206">
                <p>
                    深蓝的天空中挂着一轮金黄的圆月，下面是海边的沙地，种着一望无际的碧绿西瓜。
                    其间十一二岁的少年闰土，项带银圈，手捏钢叉，向一匹猹刺去。那猹却将身一扭，反从他胯下逃走——这幅月夜刺猹的画面，成了“我”三十年来难忘的剪影。
                    那年，因家中轮到三十余年一遇的大祭祀值年，祭器贵重需人看管，父亲便允了忙月的请求，唤其子闰土进城相助。
                </p>
                <p>
                    初见闰土时，他紫色圆脸，头戴小毡帽，颈套明晃晃银项圈，显是父亲怕他夭折，求神佛“用圈子将他套住”的印记。
                    他见人羞怯，却与我亲近。不到半日，我们熟识了。他给我说起雪天沙地捕鸟：扫净空地，支竹匾，撒秕谷，待鸟雀啄食时一拉绳，稻鸡、角鸡、鹁鸪便罩在匾下。
                    我听得心痒，又央他多讲乡野奇闻。
                    他又邀我夏日去海边捡贝壳：“红的绿的，鬼见怕、观音手都有！”还说起月夜持叉守瓜田，与獾猪、刺猬、猹斗智：“这畜生伶俐，皮毛油一般滑，倒向你奔来，反从胯下窜走！”
                    这些新鲜事是我往常朋友所不知道的。
                </p>
                <p>
                    正月结束时，闰土要回家去。我急得大哭，他躲进厨房哭泣，终被他父亲拽走。
                    他后来托他的父亲捎来一包贝壳、几支彩羽，我亦回赠小物，却再未重逢。
                </p>
            </section>
            <footer>
                <h5>整体框架</h5>
                <p>
                    《故乡》以鲁迅1919年12月从北京回乡搬家的现实经历为素材，描写了一个还乡故事，是中国现代还乡叙事小说中具有典范意义的作品。
                    小说在“我”的叙述中，展现了还乡者的故乡体验和对传统乡村的文化价值判断。
                    《故乡》在“还乡”的情节叙事下，呈现出维度丰富的对照性意蕴，蕴藏着作家复杂的个人感悟和思索，体现出深刻的文化诗学内涵，展现了对封建社会的批判和唤醒国民性的主题。
                </p>
            </footer>
        </article>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>

/** 圆形浮动 */
.circle-float {
    float: left;
    margin: 0 20px 20px 0;
    border-radius: 50%; /* 圆形图片 */

    /* 关键属性：定义文字环绕的形状 */
    shape-outside: circle(50%);

    /* 可选：裁剪图片为圆形（如果图片本身不是圆形） */
    clip-path: circle(50%);
}

/** 多边形浮动 */
.polygon-float {
    float: left;
    width: 200px;
    height: 200px;
    margin: 0 20px 20px 0;

    /* 定义文字环绕的多边形路径（顶点坐标） */
    shape-outside: polygon(0 0, 100% 0, 80% 100%, 20% 100%);

    /* 可选：裁剪图片为多边形 */
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
</style>